<template>
  <div
    class="container"
    style="width: 100%; margin: 20px 40px"
    v-loading="loading"
  >
    <div>
      <div
        style="
          display: block;
          float: right;
          margin-right: 80px;
          position: relative;
          z-index: 1;
        "
      >
        <el-button type="default" round size="medium " @click="saveToBase"
          >保存到库</el-button
        >
        <el-button type="default" round size="medium " @click="exportWord"
          >导出word</el-button
        >
      </div>

      <el-row :gutter="20" :show-overflow-tooltip="true">
        <!--部门数据-->
        <el-col :span="4" :xs="24">
          <div class="head-container">
            <!-- v-model="domainName" -->
            <el-input
              placeholder="请输入领域名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container" style="min-width: 200px">
            <el-tree
              :data="domainOptions"
              :props="defaultProps"
              :filter-node-method="filterNode"
              :default-expand-all="true"
              :auto-expand-parent="true"
              highlight-current:true
              node-key="id"
              ref="myTree"
              :current-node-key="queryParams.domain"
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <!--用户数据-->
        <el-col :span="20" :xs="10">
          <el-form
            style="
              display: block;
              margin: 20px;
              float: none;
              text-align: left;
              max-width: 800px;
              z-index: 1;
            "
          >
            <div v-for="(item, index) in showItems" :key="index">
              <el-tabs
                v-if="queryParams.domain == item.id"
                style="padding-bottom: 10px"
                @tab-click="tabClick(item)"
              >
                <el-tab-pane label="现状">
                  <el-form-item>
                    <el-input
                      type="textarea"
                      rows="6"
                      v-model="item.domainInfo.content"
                      @input="changeMessage"
                    ></el-input>
                  </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="原因">
                  <el-form-item>
                    <el-select
                      filterable
                      placeholder="请选择"
                      v-model="reason"
                      @change="
                        (e) => {
                          item.domainInfo.reason
                            ? (item.domainInfo.reason +=
                                '；' +
                                selectOptions.reason.filter(
                                  (item) => item.reasonId == e
                                )[0].content)
                            : (item.domainInfo.reason =
                                selectOptions.reason.filter(
                                  (item) => item.reasonId == e
                                )[0].content);
                        }
                      "
                    >
                      <el-option
                        v-for="item in selectOptions.reason"
                        :key="item.reasonId"
                        :label="item.content"
                        :value="item.reasonId"
                      >
                      </el-option>
                    </el-select>

                    <el-input
                      type="textarea"
                      rows="6"
                      v-model="item.domainInfo.reason"
                      @input="changeMessage(item.domainInfo, 'reasonEdit')"
                    ></el-input>
                  </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="改善建议">
                  <el-select
                    filterable
                    placeholder="请选择"
                    v-model="suggest"
                    @change="
                      (e) => {
                        item.domainInfo.suggest
                          ? (item.domainInfo.suggest +=
                              '；' +
                              selectOptions.suggest.filter(
                                (item) => item.suggestId == e
                              )[0].content)
                          : (item.domainInfo.suggest =
                              selectOptions.suggest.filter(
                                (item) => item.suggestId == e
                              )[0].content);
                      }
                    "
                  >
                    <el-option
                      v-for="item in selectOptions.suggest"
                      :key="item.suggestId"
                      :label="item.content"
                      :value="item.suggestId"
                    >
                    </el-option>
                  </el-select>

                  <el-input
                    type="textarea"
                    rows="6"
                    v-model="item.domainInfo.suggest"
                    @input="changeMessage(item.domainInfo, 'suggestEdit')"
                  ></el-input>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import render from "@/utils/generator/render";
import logo from "@/assets/logo/logo.png";

import { listQuestion } from "@/api/system/question";

import ProblemItem from "./showItem";

import { treeselect2 } from "@/api/system/questiondomain";
import {
  getNaireQuestions,
  getNaireQuestionsWithGrade,
} from "@/api/system/naire";

import {
  getDiagnosis,
  diagnosisDomain,
  getDiagnosisWord,
} from "@/api/system/diagnosis";
import { saveAs } from "file-saver";
import { addRecord } from "@/api/system/questionrecord";

//原因库
import { listTemplete as listRTemplete } from "@/api/system/reasonTemplate";
import { listTemplete as listSTemplete } from "@/api/system/suggestedTemplate";

let oldActiveId;

export default {
  components: {
    render,
    ProblemItem,
  },
  data() {
    return {
      loading: false,
      showInfo: -1,
      activities: [],
      domainOptions: undefined,
      domainName: undefined,
      domainNames: new Map(),
      logo,
      idGlobal: 100,
      labelWidth: 100,
      drawingList: [],
      questionList: [],
      drawingData: {},
      activeId: null,
      drawerVisible: false,
      formData: {},
      dialogVisible: false,
      generateConf: null,
      showFileName: false,
      activeData: [],
      queryParams: {
        companyId: this.$route.query.compId || this.$store.state.user.compId,
        naireId: undefined,
        domain: undefined,
      },
      defaultProps: {
        children: "children",
        label: "label",
      },

      domainInfo: [],
      showItems: [],
      selectOptions: {
        reason: [],
        suggest: [],
      },
      reason: undefined,
      suggest: undefined,
      diagnosisId: undefined,
    };
  },
  created() {
    if (this.$route.query.naireId)
      this.queryParams.naireId = this.$route.query.naireId;
    if (this.$route.query.domain)
      this.queryParams.domain = this.$route.query.domain;
    this.getTreeselect();
  },

  methods: {
    changeMessage(item, e) {
      //强制刷新渲染
      this.$forceUpdate();
      console.log(item, e);
      if (e) {
        item[e] = 1;
        this.reason = undefined;
      }
    },
    saveToBase() {
      console.log(this.showItems, "this.showItems");
      let showItems = [];
      this.showItems.forEach((item) => {
        showItems.push(item.domainInfo);
      });
      let obj = {
        deptId: this.queryParams.companyId,
        diagnosisId: this.diagnosisId,
        domainInfo: JSON.stringify(showItems),
      };
      console.log(obj, "obj");
      diagnosisDomain(obj)
        .then((res) => {
          this.$modal.msgSuccess("保存成功");
          console.log(res, "res");
        })
        .catch(() => {});
    },
    exportWord() {
      getDiagnosisWord(this.queryParams.companyId)
        .then((res) => {
          console.log(res, "res");
          saveAs(res, "诊断报告");
        })
        .catch(() => {});
    },
    tabClick(e) {
      console.log(e, "tabClick");
    },
    getDiagnosisById(showItems) {
      getDiagnosis(this.queryParams.companyId)
        .then((res) => {
          let domainInfo = JSON.parse(res.data.domainInfo);

          console.log(domainInfo, "domainInfo");
          domainInfo.map(
            (item) => ((item.reasonEdit = 0), (item.suggestEdit = 0))
          );
          console.log(domainInfo, "domainInfo");
          showItems.forEach((item) => {
            domainInfo.some((i, index) => {
              if (i.domainId == item.id) {
                item.domainInfo = domainInfo[index];
                return;
              }
            });
            //  item.domainInfo = domainInfo.filter(
            //             (i) => i.domainId == item.domain
            //           )[0];
            // if (
            //   domainInfo.some((i) => {
            //     if (i.domainId == item.domain) return true;
            //   })
            // ) {
            //   item.domainInfo = domainInfo;
            // }
          });
          this.showItems = showItems;
          this.diagnosisId = res.data.diagnosisId;
          console.log(showItems, "showItems");
        })
        .catch(() => {});
    },

    getTreeselect() {
      treeselect2(this.queryParams.companyId, this.queryParams.naireId).then(
        (response) => {
          this.domainOptions = response.data;
          console.log(this.domainOptions, "this.domainOptions");
          this.$nextTick(() => {
            this.$refs.myTree?.setCurrentKey(this.queryParams.domain);
          });

          listRTemplete({
            domainId: this.queryParams.domain,
          }).then((response) => {
            console.log(response, "response");
            this.selectOptions.reason = response.rows;
          });
          listSTemplete({
            domainId: this.queryParams.domain,
          }).then((response) => {
            console.log(response, "response");
            this.selectOptions.suggest = response.rows;
          });

          let showItems = [];
          this.domainOptions.forEach((items) => {
            items.children?.forEach((item) => {
              item.children?.forEach((i) => {
                showItems.push(i);
              });
            });
          });

          this.getDiagnosisById(showItems);
          console.log(showItems);
        }
      );
    },

    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    // 节点单击事件
    handleNodeClick(data) {
      if (!data?.children) {
        this.queryParams.domain = data.id;
        listTemplete({
          domainId: this.queryParams.domain,
        }).then((response) => {
          console.log(response, "response");
          this.selectOptions.reason = response.rows;
        });
      }
    },
  },
};
</script>

<style lang="scss">
body,
html {
  margin: 0;
  padding: 0;
  background: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

input,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

.editor-tabs {
  background: #121315;

  .el-tabs__header {
    margin: 0;
    border-bottom-color: #121315;

    .el-tabs__nav {
      border-color: #121315;
    }
  }

  .el-tabs__item {
    height: 32px;
    line-height: 32px;
    color: #888a8e;
    border-left: 1px solid #121315 !important;
    background: #363636;
    margin-right: 5px;
    user-select: none;
  }

  .el-tabs__item.is-active {
    background: #1e1e1e;
    border-bottom-color: #1e1e1e !important;
    color: #fff;
  }

  .el-icon-edit {
    color: #f1fa8c;
  }

  .el-icon-document {
    color: #a95812;
  }
}

// home
.right-scrollbar {
  .el-scrollbar__view {
    padding: 12px 18px 15px 15px;
  }
}

.left-scrollbar .el-scrollbar__wrap {
  box-sizing: border-box;
  overflow-x: hidden !important;
  margin-bottom: 0 !important;
}

.center-tabs {
  .el-tabs__header {
    margin-bottom: 0 !important;
  }

  .el-tabs__item {
    width: 50%;
    text-align: center;
  }

  .el-tabs__nav {
    width: 100%;
  }
}

.reg-item {
  padding: 12px 6px;
  background: #f8f8f8;
  position: relative;
  border-radius: 4px;

  .close-btn {
    position: absolute;
    right: -6px;
    top: -6px;
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    color: #fff;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    font-size: 12px;

    &:hover {
      background: rgba(210, 23, 23, 0.5);
    }
  }

  & + .reg-item {
    margin-top: 18px;
  }
}

.action-bar {
  & .el-button + .el-button {
    margin-left: 15px;
  }

  & i {
    font-size: 20px;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }
}

.custom-tree-node {
  width: 100%;
  font-size: 14px;

  .node-operation {
    float: right;
  }

  i[class*="el-icon"] + i[class*="el-icon"] {
    margin-left: 6px;
  }

  .el-icon-plus {
    color: #409eff;
  }

  .el-icon-delete {
    color: #157a0c;
  }
}

.left-scrollbar .el-scrollbar__view {
  overflow-x: hidden;
}

.el-rate {
  display: inline-block;
  vertical-align: text-top;
}

.el-upload__tip {
  line-height: 1.2;
}

$selectedColor: #f6f7ff;
$lighterBlue: #409eff;

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.components-list {
  padding: 8px;
  box-sizing: border-box;
  height: 100%;

  .components-item {
    display: inline-block;
    width: 48%;
    margin: 1%;
    transition: transform 0ms !important;
  }
}

.components-draggable {
  padding-bottom: 20px;
}

.components-title {
  font-size: 14px;
  color: #222;
  margin: 6px 2px;

  .svg-icon {
    color: #666;
    font-size: 18px;
  }
}

.components-body {
  padding: 8px 10px;
  background: $selectedColor;
  font-size: 12px;
  cursor: move;
  border: 1px dashed $selectedColor;
  border-radius: 3px;

  .svg-icon {
    color: #777;
    font-size: 15px;
  }

  &:hover {
    border: 1px dashed #787be8;
    color: #787be8;

    .svg-icon {
      color: #787be8;
    }
  }
}

.left-board {
  width: 260px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
}

.left-scrollbar {
  height: calc(100vh - 42px);
  overflow: hidden;
}

.center-scrollbar {
  height: calc(100vh - 42px);
  overflow: hidden;
  border-left: 1px solid #f1e8e8;
  border-right: 1px solid #f1e8e8;
  box-sizing: border-box;
}

.center-board {
  height: 100vh;
  width: auto;
  margin: 0 350px 0 260px;
  box-sizing: border-box;
}

.empty-info {
  position: absolute;
  top: 46%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 18px;
  color: #ccb1ea;
  letter-spacing: 4px;
}

.action-bar {
  position: relative;
  height: 42px;
  text-align: right;
  padding: 0 15px;
  box-sizing: border-box;
  border: 1px solid #f1e8e8;
  border-top: none;
  border-left: none;

  .delete-btn {
    color: #f56c6c;
  }
}

.logo-wrapper {
  position: relative;
  height: 42px;
  background: #fff;
  border-bottom: 1px solid #f1e8e8;
  box-sizing: border-box;
}

.logo {
  position: absolute;
  left: 12px;
  top: 6px;
  line-height: 30px;
  color: #00afff;
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap;

  > img {
    width: 30px;
    height: 30px;
    vertical-align: top;
  }

  .github {
    display: inline-block;
    vertical-align: sub;
    margin-left: 15px;

    > img {
      height: 22px;
    }
  }
}

.center-board-row {
  padding: 12px 12px 15px 12px;
  box-sizing: border-box;

  & > .el-form {
    // 69 = 12+15+42
    height: calc(100vh - 69px);
  }
}

.drawing-board {
  height: 100%;
  position: relative;

  .components-body {
    padding: 0;
    margin: 0;
    font-size: 0;
  }

  .sortable-ghost {
    position: relative;
    display: block;
    overflow: hidden;

    &::before {
      content: " ";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 3px;
      background: rgb(89, 89, 223);
      z-index: 2;
    }
  }

  .components-item.sortable-ghost {
    width: 100%;
    height: 60px;
    background-color: $selectedColor;
  }

  .active-from-item {
    & > .el-form-item {
      background: $selectedColor;
      border-radius: 6px;
    }

    & > .drawing-item-copy,
    & > .drawing-item-delete {
      display: initial;
    }

    & > .component-name {
      color: $lighterBlue;
    }
  }

  .el-form-item {
    margin-bottom: 15px;
  }
}

.drawing-item {
  position: relative;
  cursor: move;

  &.unfocus-bordered:not(.activeFromItem) > div:first-child {
    border: 1px dashed #ccc;
  }

  .el-form-item {
    padding: 12px 10px;
  }
}

.drawing-row-item {
  position: relative;
  cursor: move;
  box-sizing: border-box;
  border: 1px dashed #ccc;
  border-radius: 3px;
  padding: 0 2px;
  margin-bottom: 15px;

  .drawing-row-item {
    margin-bottom: 2px;
  }

  .el-col {
    margin-top: 22px;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .drag-wrapper {
    min-height: 80px;
  }

  &.active-from-item {
    border: 1px dashed $lighterBlue;
  }

  .component-name {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    color: #bbb;
    display: inline-block;
    padding: 0 6px;
  }
}

.drawing-item,
.drawing-row-item {
  &:hover {
    & > .el-form-item {
      background: $selectedColor;
      border-radius: 6px;
    }

    & > .drawing-item-copy,
    & > .drawing-item-delete {
      display: initial;
    }
  }

  & > .drawing-item-copy,
  & > .drawing-item-delete {
    display: none;
    position: absolute;
    top: -10px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    border: 1px solid;
    cursor: pointer;
    z-index: 1;
  }

  & > .drawing-item-copy {
    right: 56px;
    border-color: $lighterBlue;
    color: $lighterBlue;
    background: #fff;

    &:hover {
      background: $lighterBlue;
      color: #fff;
    }
  }

  & > .drawing-item-delete {
    right: 24px;
    border-color: #f56c6c;
    color: #f56c6c;
    background: #fff;

    &:hover {
      background: #f56c6c;
      color: #fff;
    }
  }
}
.el-tree-node .is-expanded .is-current {
  .el-tree-node__label {
    background: #aaa;
    padding: 10px;
  }
}
</style>
